<template>
  <CommonDialog :dialogShow.sync="dialogShow" :title="curRow?.matchId ? '编辑比赛' : '新增比赛'" @makeSure="makeSure">
    <template #content>
      <el-form :model="team" label-width="120px" :rules="rules" class="team" ref="raceRef">
        <el-form-item label="比赛名称：" prop="matchName">
          <common-input v-model="team.matchName" placeholder="请输入比赛名称"></common-input>
        </el-form-item>
        <el-form-item label="比赛时间：" prop="time">
          <el-date-picker v-model="team.time" type="datetimerange" range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="队伍一：" prop="positiveList">
          <common-select v-model="team.positiveList" :options="userOptions1" :multiple="true" :disabled="true"
            placeholder="请选择参赛队员" @change="changeteam"></common-select>
        </el-form-item>
        <el-form-item label="队伍二：" prop="negativeList">
          <common-select v-model="team.negativeList" :options="userOptions2" :multiple="true" :disabled="true"
            placeholder="请选择参赛队员" @change="changeteam2"></common-select>
        </el-form-item>
        <el-form-item label="裁判：" prop="referee">
          <common-select v-model="team.referee" :options="referees"  placeholder="请选择裁判"
            @change="changeReferee"></common-select>
        </el-form-item>
        <el-form-item label="比赛地点：" prop="venue">
          <common-input v-model="team.venue" placeholder="请输入比赛地点"></common-input>
        </el-form-item>
      </el-form>
    </template>
  </CommonDialog>
</template>

<script>
export default {
  props: {
    changeDialog: {
      typeof: Boolean,
      default: false,
    },
    curRow: {
      typeof: Object,
      default: () => {
        return {
          id: "",
        };
      },
    },
    playerList: {
      typeof: Array,
      default: () => {
        return [];
      },
    },
    refereeList: {
      typeof: Array,
      default: () => {
        return [];
      },
    }
  },
  created() {
    if (this.curRow.matchId) {

      const keys = Object.keys(this.curRow);
      keys.forEach((key) => {
        if (key == 'endTime') {
          this.team.time[0] = this.curRow.startTime
          this.team.time[1] = this.curRow.endTime
        } if (key == 'positiveList' || key == 'negativeList') {
          this.team.positiveList = this.curRow['positiveList'].map(item => {
            return item.id
          })
          this.team.negativeList = this.curRow['negativeList'].map(item => {
            return item.id
          })
        } else {

          this.team[key] = this.curRow[key];
        }
      });
      console.log(this.team);

    }
    this.userOptions1 = this.playerList.map(item => {
      return {
        value: item.id,
        label: item.name,
        disabled: false
      }
    })

    this.userOptions2 = this.playerList.map(item => {
      return {
        value: item.id,
        label: item.name,
        disabled: false
      }
    })
    this.referees = this.refereeList.map(item => {
      return {
        value: item.id,
        label: item.name,
      }
    })

    console.log(this.curRow, 'referees');



  },
  data() {
    return {
      team: {
        matchName: "",
        time: [],
        referee: '',
        positiveList: [],
        negativeList: [],
        venue: "",
        refereeName: ''
      },
      referees: [
        {
          value: '9',
          label: '李武'
        }
      ],
      userOptions1: [
        {
          value: "1",
          label: "张1",
          disabled: false
        },
        {
          value: "2",
          label: "张2",
          disabled: false
        },
        {
          value: "3",
          label: "张3",
          disabled: false
        },
        {
          value: "4",
          label: "张4",
          disabled: false
        },
        {
          value: "5",
          label: "张5",
          disabled: false
        },
        {
          value: "6",
          label: "张6",
          disabled: false
        },
        {
          value: "7",
          label: "张7",
          disabled: false
        },
        {
          value: "8",
          label: "张8",
          disabled: false
        },
        {
          value: "9",
          label: "张9",
          disabled: false
        },
        {
          value: "10",
          label: "张10",
          disabled: false
        },
      ],
      userOptions2: [
        {
          value: "1",
          label: "张1",
          disabled: false

        },
        {
          value: "2",
          label: "张2",
          disabled: false

        },
        {
          value: "3",
          label: "张3",
          disabled: false

        },
        {
          value: "4",
          label: "张4",
          disabled: false
        },
        {
          value: "5",
          label: "张5",
          disabled: false
        },
        {
          value: "6",
          label: "张6",
          disabled: false
        },
        {
          value: "7",
          label: "张7",
          disabled: false
        },
        {
          value: "8",
          label: "张8",
          disabled: false
        },
        {
          value: "9",
          label: "张9",
          disabled: false
        },
        {
          value: "10",
          label: "张10",
          disabled: false
        },
      ],
      rules: {
        matchName: [
          { required: true, message: "请输入比赛名称", trigger: "blur" },
        ],
        time: [
          { required: true, message: "请选择比赛时间", trigger: "change" },
        ],
        referee: [
          { required: true, message: "请选择裁判", trigger: 'change' },
        ],
        positiveList: [
          { required: true, message: "请选择队伍一", trigger: 'change' },
        ],
        negativeList: [
          { required: true, message: "请选择队伍一", trigger: 'change' },
        ],
        venue: [
          { required: true, message: "请输入比赛地点", trigger: 'blur' },

        ]
      },
    };
  },
  computed: {
    dialogShow: {
      get() {
        return this.changeDialog;
      },
      set(v) {
        this.$emit("update:changeDialog", v);
      },
    },
  },
  mounted() { },

  methods: {
    changeReferee(v) {
      this.team.refereeName = v
    },
    makeSure() {
      this.team.refereeName = this.referees.find((item) => item.value == this.team.referee).label
      this.team.startTime = this.team.time[0]
      this.team.endTime = this.team.time[1]
      let list1 = this.team.positiveList.map(item => {
        const res = this.userOptions1.find(_item => {
          if (item == _item.value) {
            return _item
          }
        })
        return {
          name: res.label,
          id: res.value
        }
      })

      let list2= this.team.negativeList.map(item => {
        const res = this.userOptions1.find(_item => {
          if (item == _item.value) {
            return _item
          }
        })
        return {
          name: res.label,
          id: res.value
        }
      })
      console.log(this.team);
      this.$refs.raceRef.validate((valid) => {
        if (valid) {
          this.team.positiveList = list1
          this.team.negativeList = list2
          this.$emit('makeSure', this.team)
          this.changeDialog = false
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    changeteam(v) {
      console.log(v);
      // this.userOptions2[0].disabled = true
      this.userOptions2.forEach((_item, _index) => {
        _item.disabled = false
      })
      let indexArr = []
      v.forEach(item => {
        this.userOptions2.forEach((_item, _index) => {
          if (item == _item.value) {
            indexArr.push(_index)
          }
        })
      })
      console.log(indexArr, 'a');
      indexArr.forEach((item) => {
        this.userOptions2[item].disabled = true
        this.$set(this.userOptions2[item], 'disabled', true)
      })
      this.$forceUpdate()

    },
    changeteam2(v) {
      console.log(v);
      this.userOptions1.forEach((_item, _index) => {
        _item.disabled = false
      })
      let indexArr = []
      v.forEach(item => {
        this.userOptions1.forEach((_item, _index) => {
          if (item == _item.value) {
            indexArr.push(_index)
          }
        })
      })
      console.log(indexArr, 'a');
      indexArr.forEach((item) => {
        this.userOptions1[item].disabled = true
        this.$set(this.userOptions1[item], 'disabled', true)
      })
      this.$forceUpdate()
    }
  },
};
</script>
<style lang="less" scoped>
.team {
  color: red;

  ::v-deep {
    .el-form-item__label {
      color: #333;
      font-size: 16px;
      font-weight: medium;
    }

    .el-input {
      width: 380px !important;
    }
  }
}
</style>
